<template>
  <tr>
    <td class="checkbox-wrapper">
      <label>
        <input :checked="goods.isChecked" type="checkbox"
          @click="checkedGoods(goods.id)"
        />结算
      </label>
    </td>
    <td class="goodsInfo-wrapper">
      <span class="icon">{{ goods.icon }}</span>
      <span class="goods-desc">{{ goods.name }}</span>
    </td>
    <td class="unitPrice-wrapper">￥{{ goods.price }}</td>
    <td class="amount-wrapper">
      <AddNumber :maxCount="goods.maxCount" :count="goods.count" :goodsId="goods.id"
        :increaseGoodsAmount="increment"
        :reduceGoodsAmount="decrement"
      />
    </td>
    <td class="sumMoney-wrapper">￥{{ goods.totalPrice }}</td>
    <td class="handle-wrapper" @click="removeGoods(goods.id)">删除</td>
  </tr>
</template>

<script>
import { mapMutations } from 'vuex'
import AddNumber from './AddNumber'
export default {
  name: 'GoodsCard',
  components: {
    'AddNumber': AddNumber
  },
  methods: {
    ...mapMutations(['removeGoods', 'increment', 'decrement'])
  },
  props: {
    'goods': {
      type: Object,
      required: false
    },
    'checkedGoods': {
      type: Function,
      required: true
    }
  }
}
</script>

<style lang='scss'>
@mixin flexRow{
    display: flex;
    align-items: center;
}

.checkbox-wrapper{
    label{
        cursor: pointer;
        @include flexRow;
        input[type='checkbox']{
          height: 16px;
          width: 16px;
        }
    }
}
  .goodsInfo-wrapper{
    @include flexRow;
    .goods-desc{
      color: gray;
    }
    .icon{
        font-size: 60px;
    }
  }
  .unitPrice-wrapper{
    font-weight: 600;
  }
  .sumMoney-wrapper{
    font-weight: 600;
    color: #f22;
  }
  .handle-wrapper{
    cursor: pointer;
    &:hover{
      text-decoration-line: underline;
    }
  }
</style>
